<template>
  <div class="register-container">
    <!-- ref="registerRefs" 创建子组件引用 -->
    <!-- :model="registerForm" 绑定登录表单 -->
    <!-- :rules="registerRules" 绑定登录规则 -->
    <el-form
      ref="registerRefs"
      :model="registerForm"
      :rules="registerRules"
      class="register-form"
      label-position="top"
    >
      <h2 class="register-title">注册</h2>
      <el-form-item label="账号" prop="UserID">
        <el-input v-model="registerForm.UserID"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="Password">
        <el-input type="password" v-model="registerForm.Password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="Confire">
        <el-input type="password" v-model="registerForm.Confire"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="Email">
        <el-input type="input" v-model="registerForm.Email"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="VerificationCode">
        <el-input
          type="input"
          v-model="registerForm.VerificationCode"
        ></el-input>
      </el-form-item>
      <el-form-item class="register-button">
        <el-button type="primary" @click="registerSubmit">注册</el-button>
        <el-button type="primary" @click="registerSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import { ref, reactive } from "vue";
  // 创建登录表单
  const registerForm = reactive({
    UserID: "",
    UserName: "",
    Password: "",
    Confire: "",
    Email: "",
    VerificationCode: "",
  });

  // 创建表单验证规则
  const registerRules = {
    UserID: [
      {
        required: true,
        message: "请输入账号",
        trigger: "blur",
      },
      {
        pattern: /^[a-zA-Z0-9]{10,14}$/,
        message: "限制为10到14个字母或字符",
        trigger: ["blur", "change"],
      },
    ],
    Password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
    Confire: [
      {
        required: true,
        message: "请再次输入密码",
        trigger: "blur",
      },
    ],
    Email: [
      {
        required: true,
        message: "请输入邮箱",
        trigger: "blur",
      },
      {
        pattern:
          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        message: "请输入正确的邮箱格式",
        trigger: ["blur", "change"],
      },
    ],
    VerificationCode: [
      {
        required: true,
        message: "请输入邮箱验证码",
        trigger: "blur",
      },
      {
        pattern: /^[a-zA-Z0-9]{6}$/,
        message: "限制6位数字或字母",
        trigger: "blur",
      },
    ],
  };

  // 创建表单引用
  const registerRefs = ref();

  const registerSubmit = () => {
    // 数据验证
    registerRefs.value.validate((valid) => {
      if (valid) {
        // 表单验证成功逻辑
        ElMessage.success("登录成功");
      } else {
        // 表单验证失败逻辑
        ElMessage.error("请检查输入内容正确性");
        return;
      }
    });
  };
</script>

<style scoped>
  .register-button:deep() div {
    display: flex;
    justify-content: flex-end;
  }
  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .register-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .register-form {
    width: 400px;
  }
  .register-title {
    font-size: 24px;
    margin-bottom: 20px;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
</style>
